"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'

const {View, ScrollView, ImageBackground, TouchableOpacity, Image} = require('react-native');
const {connect} = require('react-redux');

const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";

import MyText from "../../component/MyText";
import NavBackButton from "../../component/BackButton";
import NavRightButton from "../../component/RightButton";
import Colors from "../../assets/styles/Colors";
import SearchBar from "../../component/SearchBar";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
import {buildingExtraInfo, buildingGuideMainInfo, supportList} from "../../assets/data";
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../constant";
import {PlacePage} from "../../interface/router";

const {List, InputItem, DatePicker} = require('antd-mobile');

class BuildingGuidePage extends React.Component<PlacePage, any> {
    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            firstName: null,
            lastName: null,
            date: new Date()
        };
    }




    onExtraInfoItemPress = (item) => {
        if (item.target) {
            Actions.push(item.target, {title: item.name, ...item})
        }
    };

    render() {

        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: '建筑指南', tintColor: '#fff'}}
                />
                <View style={[commonStyles.flex1]}>
                    <ScrollView>
                        <ImageBackground source={require('../../assets/image/background_three.png')}
                                         style={{width: SCREEN_WIDTH}}>
                            {buildingGuideMainInfo.map((item, index) => {
                                if (index === buildingGuideMainInfo.length - 1) {
                                    return <GuideItem icon={item.icon}
                                                      data={item.data}
                                                      key={index}
                                    />
                                } else {
                                    return [<GuideItem icon={item.icon}
                                                       key={`item_${index}`}
                                                       data={item.data}/>,
                                        <Line color={'#575757'}
                                              key={`line_${index}`}
                                              height={2}/>]
                                }
                            })}
                        </ImageBackground>
                        {buildingExtraInfo.map((item, index) => {
                            return (
                                <TouchableOpacity key={index} onPress={this.onExtraInfoItemPress.bind(this, item)}>
                                    <View style={[commonStyles.flexRow, commonStyles.listItem, {
                                        backgroundColor: Colors.White,
                                        justifyContent: 'space-between',
                                        padding: 15
                                    }]}>
                                        <MyText color={Colors.Title}>{item.name}</MyText>
                                        <MyIcon name={'icon-iconfontyoujiantou'} color={Colors.Black}/>
                                    </View>
                                    <Line color={Colors.Background}/>
                                </TouchableOpacity>
                            )
                        })}
                    </ScrollView>
                </View>
            </View>
        );
    }
}


export default connect(
    ({auth, place}) => ({auth, place})
)(BuildingGuidePage);

interface GuideItemData {
    label?: string,
    value?: string,
}

interface GuideItemProps {
    icon: any,
    data: GuideItemData | GuideItemData[]
}


const GuideItem = (props: GuideItemProps) => {
    if (!Array.isArray(props.data)) {
        return (
            <View style={[commonStyles.flexRow, {paddingVertical: autoSize(33), paddingHorizontal: autoSize(15)}]}>

                <Image source={props.icon} width={30} height={30}/>
                <View style={[commonStyles.flex1, {
                    marginLeft: 10,
                }]}>
                    <MyText color={'#fff'} fontSize={16}>{props.data.label}</MyText>
                    <MyText color={'#AEADAD'} fontSize={18} fontWeight={'500'}
                            style={{marginTop: 5}}>{props.data.value}</MyText>
                </View>
            </View>
        )
    } else {
        return (
            <View style={[commonStyles.flexRow, {paddingVertical: autoSize(33), paddingHorizontal: autoSize(15)}]}>
                <View style={[commonStyles.flexRow, {flex: 0.6}]}>
                    <Image source={props.icon} width={30} height={30}/>
                    <View style={[commonStyles.flex1, {marginLeft: 10}]}>
                        <MyText color={'#AEADAD'} numberOfLines={1} fontSize={16}>{props.data[0].label}</MyText>
                        <MyText color={'#fff'} numberOfLines={1} fontSize={18} fontWeight={'500'}
                                style={{marginTop: 5}}>{props.data[0].value}</MyText>
                    </View>
                </View>
                <View style={{display: 'flex', flex: 0.4}}>
                    <MyText color={'#AEADAD'} numberOfLines={1} fontSize={16}>{props.data[1].label}</MyText>
                    <MyText color={'#fff'} numberOfLines={1} fontSize={18} fontWeight={'500'}
                            style={{marginTop: 5}}>{props.data[1].value}</MyText>
                </View>
            </View>
        )
    }

};